require.config({
    baseUrl: "./modules",
    paths: {
        jq: "../libs/jquery",
        getData: "getData",
        render: "cartRender",
        updateLocal: "updateLocal",
        isAllCheck: "isAllCheck",
        sumNum: "sumNum",
        sumPrice: "sumPrice",
        delCheck: "delCheck",
        sum: "sum"
    }
})

require(["jq", "getData", "render", "updateLocal", "isAllCheck", "sumNum", "sumPrice", "delCheck", "sum"], function (_, g, render, updateLocal, isAllCheck, sumNum, sumPrice, delCheck, sum) {
    // 首页的登录守卫
    if (localStorage.getItem("token") === "ok") {
        $(".p1").hide()

        $(".p2").show().children("span").html(localStorage.getItem("un"))
    }

    // 退出功能
    $(".exit").click(function () {
        localStorage.setItem("token", "");
        $(".p1").show()
        $(".p2").hide()
    })

    /* 登录守卫 */
    var goCart = document.getElementById("goCart");
    console.log(goCart);
    // 去购物车的登录守卫
    goCart.onclick = function () {
        if (localStorage.getItem("token") !== "ok") {
            if (confirm("您好，请您先登录")) {
                location.href = "./login.html"
            }
            return false;
        }
    }

    // 1. 获取本地存储中的数据
    let goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
    console.log(goods);
    // 2. 获取服务器商品数据
    g("http://localhost:3000/api?type=getGoods").then((res) => {
        // 3. 渲染页面
        render(res, goods, $("tbody"));
        // console.log(goods)
        // 4. 商品的选中状态
        $("tbody").on("change", ".check", function () {
            // 获取id
            const id = $(this).parent().parent().attr("id");
            // 获取选中状态
            const c = this.checked;
            // 更新数据
            updateLocal(goods, id, function (i) {
                goods[i].check = c;
            })

            // 判断是否需要全选
            $("#allCheck")[0].checked = isAllCheck(goods);

            // 计算总数量
            $(".sumNum").html(sumNum(goods));

            // 计算总价
            $(".sumPrice").html(sumPrice(goods));
        })
        // 5. 商品的修改数量
        $("tbody").on("input", ".setNum", function () {
            const id = $(this).parent().parent().attr("id");
            const n = this.value - 0;
            updateLocal(goods, id, function (i) {
                goods[i].num = n;
            })
            //修改合计
            $(".sum").html(sum(goods, id))
            // 计算总数量
            $(".sumNum").html(sumNum(goods));

            // 计算总价
            $(".sumPrice").html(sumPrice(goods));
        })
        // 6. 商品的删除
        $("tbody").on("click", ".del", function () {
            const id = $(this).parent().attr("id");
            $(this).parent().remove();
            updateLocal(goods, id, function (i) {
                goods.splice(i, 1);
            })

            // 计算总数量
            $(".sumNum").html(sumNum(goods));

            // 计算总价
            $(".sumPrice").html(sumPrice(goods));
        })
        // 7. 单个选中决定是否全选
        $("#allCheck")[0].checked = isAllCheck(goods);

        // 8. 全选影响单个商品的选中
        $("#allCheck").change(function () {
            // 封装成模块：通过全选控制单个商品的选中功能
            goods.forEach(val => {
                val.check = this.checked;
            });
            localStorage.setItem("goods", JSON.stringify(goods));
            for (let i = 0; i < $(".check").length; i++) {
                $(".check")[i].checked = this.checked;
            }

            // 计算总数量
            $(".sumNum").html(sumNum(goods));

            // 计算总价
            $(".sumPrice").html(sumPrice(goods));
        })

        // 9. 计算总数量
        $(".sumNum").html(sumNum(goods));

        // 10. 计算总价
        $(".sumPrice").html(sumPrice(goods));

        // 11. 删除选中商品
        $(".delCheck").click(function () {
            // 删除选中（其实是过滤出未选中）并返回处理之后的新数据
            goods = delCheck(goods);
            // 重新渲染
            render(res, goods, $("tbody"));

            // 删除选中，剩下的肯定没有选中
            // 计算总数量和总价都是根据选中的商品计算
            // 所以，删除选中之后，总价和总数量可以直接设置为0
            $(".sumNum").html(0);
            $(".sumPrice").html(0);
            // 删除选中之后，全选状态的改变
            $("#allCheck")[0].checked = isAllCheck(goods);
        })
    })
})